import React, { useState } from 'react';
import { Breadcrumb, Input, Switch, Table } from 'antd';
import pub from '@/css/Tom/pub.less';
import all from '@/css/Tom/all_store.less';

function Goods(props: any) {
  const { name, path } = props.route;
  let isCheck = false;
  const columns = [
    {
      title: 'ID',
      width: 100,
      dataIndex: 'key',
      key: 'id',
      fixed: 'left',
    },
    { title: '商品ID', dataIndex: 'address', key: '1' },
    {
      title: '商品主图',
      render: (e: any) => (
        <img style={{ width: '100%', height: '100%' }} src={e.img} alt="" />
      ),
      key: '2',
    },
    { title: '商品名称', dataIndex: 'address', key: '3' },
    { title: '价格', dataIndex: 'address', key: '4' },
    { title: '库存', dataIndex: 'address', key: '5' },
    { title: '销量', dataIndex: 'address', key: '6' },
    { title: '属性', dataIndex: 'address', key: '7' },
    {
      title: '是否上架',
      key: 'operation',
      width: 100,
      render: (state: boolean, e: Object, index: Number) => (
        <Switch
          onClick={() => isStatefun(state, e, index)}
          checkedChildren="上架"
          unCheckedChildren="下架"
          defaultChecked={e.state}
        />
      ),
    },
    { title: '创建时间', dataIndex: 'address', key: '8' },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: (e: any) => (
        <div className={all.ico}>
          <div onClick={() => change(e)}>编辑</div>
          <div onClick={() => del(e)}>删除</div>
        </div>
      ),
    },
  ];
  const [data, setdata] = useState([
    {
      key: '1',
      id: 'John Brown',
      age: 32,
      address: 'New York Park',
      state: false,
      img: 'https://img0.baidu.com/it/u=2995310383,1626092511&fm=26&fmt=auto&gp=0.jpg',
    },
    {
      key: '2',
      id: 'Jim Green',
      age: 40,
      address: 'London Park',
      state: true,
      img: 'https://img0.baidu.com/it/u=2995310383,1626092511&fm=26&fmt=auto&gp=0.jpg',
    },
  ]);
  const rot = [
    { name: '首页', path: '/' },
    { name: '门店', path: '/storeAllStore' },
    { name: name, path: path },
  ];
  const [disabled, set_disabled] = useState(false);
  const [mes, setMes] = useState('');
  function change(e: object) {
    console.log('修改', e);
  }

  function del(e: Object) {
    console.log('删除', e);
  }

  function add() {
    console.log('新增');
  }

  function isStatefun(state: boolean, e: Object, index: Number) {
    let a = data;
    a[index].state = !e.state;
    setdata(a);
    console.log(data);
  }

  function search() {
    console.log('开始搜索', mes);
  }
  function setTitle(e: any) {
    setMes(e);
  }
  return (
    <div>
      <div>
        <Breadcrumb>
          {rot.map((e) => (
            <Breadcrumb.Item key={e.name}>
              <a href={e.path}>{e.name}</a>
            </Breadcrumb.Item>
          ))}
        </Breadcrumb>
        <div className={pub.put_top}>{name}x</div>
        <div
          style={{
            display: 'flex',
            border: '1px solid #4F4F4F',
            width: '20%',
            height: '10%',
            justifyContent: 'center',
            background: 'white',
          }}
        >
          <Input
            onChange={(event) => setTitle(event.target.value)}
            size="small"
            onPressEnter={search}
            bordered={false}
            maxLength={20}
            placeholder="ID/名称/货号"
          />
          <svg
            style={{ marginLeft: '-14%' }}
            t="1629377866941"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2058"
            width="20"
            height="20"
          >
            <path
              d="M131.41481 765.723624a448.753665 448.753665 0 0 0 492.189377 96.099976 442.97044 442.97044 0 0 0 110.74261-67.429945L951.279266 1011.449171a41.959144 41.959144 0 0 0 30.146599 12.304734 42.451334 42.451334 0 0 0 42.574381-42.574381 42.328286 42.328286 0 0 0-12.304734-30.146599L794.393901 734.223504A448.876712 448.876712 0 0 0 861.331657 273.903389 448.876712 448.876712 0 0 0 273.903635 35.314588 448.261476 448.261476 0 0 0 0.000246 448.630618a447.277097 447.277097 0 0 0 131.414564 317.093006zM85.272056 448.630618A363.358808 363.358808 0 1 1 448.630864 812.112473 363.604903 363.604903 0 0 1 85.272056 448.630618z"
              fill="#94D7FF"
              p-id="2059"
            ></path>
          </svg>
        </div>
        <Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />
      </div>
    </div>
  );
}

export default Goods;
